<template>
  <label class="bbq-radio" @click="change">
    <span
        class="radio-area"
        :class="{
          'is-checked': modelValue === flag
        }"></span>
    <span class="title">
      <slot></slot>
    </span>
  </label>
</template>

<script lang="ts">
import {inject,computed,defineComponent} from 'vue'
export default defineComponent( {
  name: "bbq-radio",
  props:{
    flag: {
      type: [String, Number, Boolean],
      default: '',
    },
  },
  setup(props,ctx){
    const radioGroup: any = inject('radioGroup')

    //provide 动态绑定的值 如果用inject接受需要用computed来接收
    const modelValue = computed(()=>{
      return radioGroup.modelValue
    })

    //点击后触发provide的方法函数
    const change = ()=>{
      radioGroup.changeEvent(props.flag)
    }
    return {
      modelValue,
      change
    }
  }
})
</script>